import React, { useState } from 'react';
import { Card, List, Alert, Form, Input, Button, message } from 'antd';

// 模拟数据
const userInfo = {
  name: '张三',
  email: 'zhangsan@example.com',
  phone: '13800138000',
};

const currentBorrowList = [
  { id: 1, title: '图书标题 1', borrowDate: '2024-01-01', returnDate: '2024-01-15' },
  { id: 2, title: '图书标题 2', borrowDate: '2024-01-05', returnDate: '2024-01-20' },
];

const historyBorrowList = [
  { id: 1, title: '图书标题 3', borrowDate: '2023-12-01', returnDate: '2023-12-15' },
  { id: 2, title: '图书标题 4', borrowDate: '2023-12-05', returnDate: '2023-12-20' },
];

const overdueReminders = [
  { id: 1, title: '图书标题 5', dueDate: '2024-01-10', daysOverdue: 5 },
];

const PersonalCenter = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('修改密码:', values);
    message.success('密码修改成功');
    form.resetFields();
  };

  return (
    <div>
      {/* 个人信息展示 */}
      <Card title="个人信息" style={{ marginBottom: 20 }}>
        <p>姓名: {userInfo.name}</p>
        <p>邮箱: {userInfo.email}</p>
        <p>电话: {userInfo.phone}</p>
      </Card>

      {/* 当前借阅列表 */}
      <Card title="当前借阅列表" style={{ marginBottom: 20 }}>
        <List
          dataSource={currentBorrowList}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                title={item.title}
                description={`借阅日期: ${item.borrowDate}, 应还日期: ${item.returnDate}`}
              />
            </List.Item>
          )}
        />
      </Card>

      {/* 历史借阅记录 */}
      <Card title="历史借阅记录" style={{ marginBottom: 20 }}>
        <List
          dataSource={historyBorrowList}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                title={item.title}
                description={`借阅日期: ${item.borrowDate}, 归还日期: ${item.returnDate}`}
              />
            </List.Item>
          )}
        />
      </Card>

      {/* 逾期提醒 */}
      {overdueReminders.length > 0 && (
        <Alert
          message="逾期提醒"
          description={
            <List
              dataSource={overdueReminders}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    title={item.title}
                    description={`应还日期: ${item.dueDate}, 已逾期 ${item.daysOverdue} 天`}
                  />
                </List.Item>
              )}
            />
          }
          type="warning"
          showIcon
          style={{ marginBottom: 20 }}
        />
      )}

      {/* 密码修改 */}
      <Card title="密码修改">
        <Form form={form} onFinish={onFinish}>
          <Form.Item
            name="oldPassword"
            label="旧密码"
            rules={[{ required: true, message: '请输入旧密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[{ required: true, message: '请输入新密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            label="确认新密码"
            dependencies={['newPassword']}
            rules={[
              { required: true, message: '请确认新密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              修改密码
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default PersonalCenter;